<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" isELIgnored="false" %>

<html>
<head>
    <title>index.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./statics/css/bootstrap.min.css">
</head>

<body>
<div class="container-fluid">
    <div class="row" style="margin-top: 150px;">
        <div class="col-sm-6">
            <div id="clazzChart" style="width: 600px;height:400px;"></div>
        </div>
        <div class="col-sm-6">
            <div id="tagType" style="width: 600px;height:400px;"></div>
        </div>
    </div>
</div>
</body>
</html>
<script src="./statics/js/echarts.min.js"></script>
<script src="./statics/js/jquery-1.8.3.min.js"></script>
<script>
    var clazzChart = echarts.init(document.getElementById('clazzChart'),'light');
    var tagType = echarts.init(document.getElementById('tagType'),'light');

    var option = {
        title: {
            text: '各班级学生数量'
        },
        tooltip: {},
        legend: {
            data:['学生数量']
        },
        xAxis: {
            data: ["2001班","2002班","2003班","2004班","2005班","2006   班"]
            //data:[]
        },
        yAxis: {},
        series: [{
            name: '数量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
            //data:[]
        }],
    };

    // 使用刚指定的配置项和数据显示图表。
    clazzChart.setOption(option);
    clazzChart.showLoading();
    //$.get('${pageContext.request.contextPath}/getClazz').done(function (data) {
        clazzChart.hideLoading();
        // 填入数据
        // clazzChart.setOption({
        //     xAxis: {
        //         data: data.categories
        //     },
        //     series: [{
        //         // 根据名字对应到相应的系列
        //         name: '销量',
        //         data: data.data
        //     }]
        // });
   // });



    // $.get('${pageContext.request.contextPath}/getTag').done(function (data) {
        tagType.setOption({
            title: {
                text: '标签类型占比'
            },
            series : [
                {
                    name: '标签类型占比',
                    type: 'pie',
                    radius: '70%',
                    data:[
                        {value:235, name:'班级标签'},
                        {value:274, name:'学生标签'},
                    ]
                }
            ]
        });
    // });
</script>